<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demo about the event of owlCarouse2.">
	<meta name="keywords" content="owl, owl carousel2, demo, event">
	<meta name="author" content="Steper Kuo">
	<title>Demo: Owl events using</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<link rel="stylesheet" href="styles/owl.carousel.min.css">
	<link rel="stylesheet" href="styles/owl-navOnSide.css">
	<style data-toggle="previewCode" data-target="#demoWrap" data-collapse="on" type="text/css">
		/* Demo's CSS here */
		.btn
		{
			border: solid 1px lightgray;
			border-radius: 5px;
			background-color: lightsteelblue;
			cursor: pointer;
			width: fit-content;
			padding: 5px;
			margin: 2px 0;
		}
		.owl-carousel .item
		{
			height: 10rem;
			background: #4DC7A0;
			padding: 1rem;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap" data-collapse="on">
					<!--Demo's html here-->
					<div style="width: 100%; position: relative;">
						<div style="width: 80%;">
							<h3>owl items: Equal width</h3>
							<div id="owl1" class="owl-carousel">
								<div class="item"><h4>1</h4></div>
								<div class="item"><h4>2</h4></div>
								<div class="item"><h4>3</h4></div>
								<div class="item"><h4>4</h4></div>
								<div class="item"><h4>5</h4></div>
								<div class="item"><h4>6</h4></div>
								<div class="item"><h4>7</h4></div>
								<div class="item"><h4>8</h4></div>
								<div class="item"><h4>9</h4></div>
							</div>
							<h3>owl items: Different width</h3>
							<div id="owl2" class="owl-carousel">
								<div class="item" style="width:250px"><h4>1</h4></div>
								<div class="item" style="width:100px"><h4>2</h4></div>
								<div class="item" style="width:500px"><h4>3</h4></div>
								<div class="item" style="width:100px"><h4>4</h4></div>
								<div class="item" style="width:250px"><h4>5</h4></div>
								<div class="item" style="width:150px"><h4>6</h4></div>
							</div>
						</div>
						<div style="position: absolute; top: 0; right: 0; width: 15%;">
							<p>Events</p>
							<div class="actions">
								<button id="prev" class="btn btn-default">Prev</button>
								<button id="next" class="btn btn-default">Next</button>
								<button id="add-left" class="btn btn-default">Add-left</button>
								<button id="add-right" class="btn btn-default">Add-right</button>
								<button id="replace" class="btn btn-default">Replace</button>
								<button id="remove-left" class="btn btn-default">Remove-left</button>
								<button id="remove-right" class="btn btn-default">Remove-right</button>
								<button id="destroy" class="btn btn-default">Destroy</button>
								<button id="re-init-owl" class="btn">ReInit</button>
								<button id="destroy-reinit" class="btn">Destroy+ReInit</button>
							</div>
						</div>
					</div>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>
					<a href="javascript:void(0);" onclick="switchOwlJS()">Click to use the owl.carousel.2.3.4.custom.js</a>
				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script id="owlCarouselJS" type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	var owl1 = null;
	var owl2 = null;
	function initOwl() {
		var owlOption1 = {
//			stagePadding: 50,
			margin: 10,
			navText: ['', ''],
//			autoWidth: true,
//			loop: true,
//			center: true,
//			nestedItemSelector: 'item',
			nav: true,
			dots: false,
			slideBy: 'page',
//			responsiveClass: true,
//			responsive: {
//				0: {
//					items: 1,
//					nav: true
//				},
//				600: {
//					items: 3,
//					nav: false
//				},
//				800: {
//					items: 4,
//					nav: false
//				},
//				1000: {
//					items: 5,
//					nav: false
//				},
//				1400: {
//					items: 6,
//					nav: true,
//					loop: false,
//					margin: 20
//				}
//			},
			items: 4
		};
		var owlOption2 = {
//  stagePadding: 50,
			margin: 10,
			autoWidth: true,
			dots: false,
//	freeDrag: true,
//	loop: true,
//	center: true,
//	nestedItemSelector: 'item',
			nav: false,
			items: 1
		};

		owl1 = $('#owl1').owlCarousel(owlOption1);
		owl2 = $('#owl2').owlCarousel(owlOption2);
		$('#prev').on('click', function () {
			$('#owl1').trigger('prev.owl');
			$('#owl2').trigger('prev.owl');
		});
		$('#next').on('click', function () {
			$('#owl1').trigger('next.owl');
			$('#owl2').trigger('next.owl');
		});

		$('#add-left').on('click', function () {
			var count1 = 11;
			var count2 = 22;
			var randomWidth = Math.floor(Math.random() * 1000 + 1);
			var content1 = '<div class="item"><h4>' + count1 + '</h4></div>';
			var content2 = '<div class="item" style="width:' + randomWidth + 'px"><h4>' + count2 + '</h4></div>';

			$('#owl1').trigger('add.owl.carousel', [$(content1), 0])
					.trigger('refresh.owl.carousel')
					.trigger('to.owl.carousel', [0, 500]);
			$('#owl2').trigger('add.owl.carousel', [$(content2), 0])
					.trigger('refresh.owl.carousel')
					.trigger('to.owl.carousel', [0, 500]);
		});
		$('#add-right').on('click', function () {
			var count1 = $('#owl1').find('.owl-item').length + 1;
			var count2 = $('#owl2').find('.owl-item').length + 1;
			var randomWidth = Math.floor(Math.random() * 1000 + 1);
			var content1 = '<div class="item"><h4>' + count1 + '</h4></div>';
			var content2 = '<div class="item" style="width:' + randomWidth + 'px"><h4>' + count2 + '</h4></div>';

			$('#owl1').trigger('add.owl.carousel', [$(content1)])
					.trigger('refresh.owl.carousel')
					.trigger('to.owl.carousel', [-1, 500]);
			$('#owl2').trigger('add.owl.carousel', [$(content2)])
					.trigger('refresh.owl.carousel')
					.trigger('to.owl.carousel', [-1, 500]);
		});

		$('#replace').on('click', function () {
			var content1 = '';
			var content2 = '';
			for (var i = 1; i < 7; i++)
			{
				var randomWidth = Math.floor(Math.random() * 1000 + 1);
				content1 += '<div class="item"><h4>' + i * 20 + '</h4></div>';
				content2 += '<div class="item" style="width:' + randomWidth + 'px"><h4>' + i * 20 + '</h4></div>';
			}

			$('#owl1').trigger('replace.owl.carousel', content1)
					.trigger('refresh.owl.carousel');
			$('#owl2').trigger('replace.owl.carousel', content2)
					.trigger('refresh.owl.carousel');
		});

		$('#remove-left').on('click', function () {
			$('#owl1').trigger('remove.owl.carousel', 0)
					.trigger('refresh.owl.carousel');
			$('#owl2').trigger('remove.owl.carousel', 0)
					.trigger('refresh.owl.carousel');
		});

		$('#remove-right').on('click', function () {
			var count1 = $('#owl1').find('.owl-item').length;
			var count2 = $('#owl2').find('.owl-item').length;
			$('#owl1').trigger('remove.owl.carousel', count1 - 1)
					.trigger('refresh.owl.carousel');
			$('#owl2').trigger('remove.owl.carousel', count2 - 1)
					.trigger('refresh.owl.carousel');
		});

		$('#destroy').on('click', function () {
			$('#owl1').trigger('destroy.owl.carousel');

			$('#owl2').trigger('destroy.owl.carousel');
		});

		$('#re-init-owl').on('click', function () {
			owl1 = $('#owl1').owlCarousel(owlOption1);
			owl2 = $('#owl2').owlCarousel(owlOption2);
		});

		$('#destroy-reinit').on('click', function () {
			//		Destroy
			$('#owl1').trigger('destroy.owl.carousel');
			//		Init
			$('#owl1').owlCarousel(owlOption1);

			//		Destroy
			$('#owl2').trigger('destroy.owl.carousel');
			//		Init
			owl2 = $('#owl2').owlCarousel(owlOption2);
		});
	}

	window.addEventListener("load", initOwl, false);

	function switchOwlJS()
	{
		$('#owlCarouselJS').remove();
		YX.Util.load.loadScript("scripts/owl.carousel.2.3.4.custom.js", function () {
			owl1.trigger('destroy.owl.carousel');
			owl2.trigger('destroy.owl.carousel');
			initOwl();
		})
	}
</script>

</body>
</html>